<template>
  <view class="register-wrapper">
    <view class="register-entry-form-wrapper">
      <view class="logo">
        <image style="width: 200px; height: 60px;" :src="settings.logo_login" mode="widthFix" />
      </view>
      <form @submit="submit">
        <view class="input-box">
          <input
            v-model="phone"
            placeholder="输入手机号"
            placeholder-class="placeholder"
            class="input"
            type="number"
          />
        </view>
        <view class="input-box">
          <input
            v-model="code"
            placeholder="输入验证码"
            placeholder-class="placeholder"
            class="input"
            type="text"
          />
          <button
            :disabled="disabledGetVerificationCode"
            class="input-button"
            @click="getVerificationCode"
          >{{ showTimer ? second :text }}</button>
        </view>
        <button
          :disabled="loading"
          form-type="submit"
          class="button"
          :class="{disabled: loading}"
        >验证并进入</button>
      </form>
    </view>
  </view>
</template>

<script>
import { checkPhone, checkVerificationCode } from "@/utils/validate";
import { sendCodeReq, verifyByCodeWechatReq } from "@/services/register";
import { mapState } from "vuex";
export default {
  data() {
    return {
      phone: "",
      code: "",
      unionId: null,
      showTimer: false,
      second: 60,
      text: "获取验证码",
      disabledGetVerificationCode: false,
      loading: false
    };
  },
  computed: {
    ...mapState(["settings"])
  },
  methods: {
    getVerificationCode() {
      // 手机号格式校验
      if (checkPhone(this.phone)) {
        sendCodeReq(this.phone)
          .then(res => {
            uni.showToast({
              title: "验证码发送成功",
              icon: "none",
              duration: 2000
            });
            this.showTimer = true;
            this.disabledGetVerificationCode = true;
            const timer = setInterval(() => {
              this.second = this.second - 1;
              if (this.second === 0) {
                this.disabledGetVerificationCode = false;
                this.showTimer = false;
                this.second = 60;
                this.text = "重新获取";
                clearInterval(timer);
              }
            }, 1000);
          })
          .catch(err => {
            uni.showToast({
              title: err.message,
              icon: "none",
              duration: 2000
            });
          });
      } else {
        uni.showToast({
          title: "手机号格式错误",
          icon: "none",
          duration: 2000
        });
      }
    },
    submit() {
      if (checkPhone(this.phone) && checkVerificationCode(this.code)) {
        this.loading = true;

        verifyByCodeWechatReq({
          phone: this.phone,
          code: this.code,
          unionId: uni.getStorageSync("unionId")
        })
          .then(res => {
            const loadingTimer = setTimeout(() => {
              this.loading = false;
              clearTimeout(loadingTimer);
            }, 2000);
            if (res.nickName) {
              uni.setStorageSync("name", res.nickName);
            }
            if (res.headImgUrl) {
              uni.setStorageSync("avatar", res.headImgUrl);
            }
            if (res.userLoginVO && res.userLoginVO.verified) {
              uni.setStorageSync("token", res.userLoginVO.jwtTokenDTO.token);
              uni.setStorageSync("userId", res.userLoginVO.userVO.id);
              uni.setStorageSync("name", res.userLoginVO.userVO.name);
              uni.setStorageSync("phone", res.userLoginVO.userVO.phone);
              uni.setStorageSync("avatar", res.userLoginVO.userVO.avatar);
              if (uni.getStorageSync("redirectUrl")) {
                uni.redirectTo({
                  url: `/pages/index/index?redirect=${uni.getStorageSync(
                    "redirectUrl"
                  )}`
                });
              } else {
                uni.redirectTo({
                  url: `/pages/index/index`
                });
              }
            }
          })
          .catch(err => {
            const loadingTimer = setTimeout(() => {
              this.loading = false;
              clearTimeout(loadingTimer);
            }, 2000);
            uni.showModal({
              title: "提示",
              content: err.message,
              success: res => {}
            });
          });
      } else {
        uni.showToast({
          title: "手机号或验证码格式错误",
          icon: "none",
          duration: 2000
        });
      }
    }
  }
};
</script>
